import React from 'react';
import { useHistory } from 'react-router-dom'
import '../css/login.css';
import StorageUtils from '../utils/StorageUtils';
import MemoryUtils from '../utils/MemoryUtils';
import { Form, Input, Button,message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
const Item = Form.Item;

const Login = () => {
    const history = useHistory();
    const onFinish = (value) => {
        fetch('http://82.157.94.115:2005/register', {
            method: 'POST',
            body: JSON.stringify(value),
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(res => res.json())
            .then(res => {
                message.success('登录成功！')
                StorageUtils.saveUser(res.username);
                MemoryUtils.user = res.username;
                history.replace('/home')
            })
            .catch(error => {
                message.error('用户名或密码错误！')
            })
    }
    return (
        <div className='login'>
            <div className='login-header'>
                <h1>跑步鸡后台管理系统</h1>
            </div>
            <div className='login-content'>
                <h1>管理员登录</h1>
                <Form
                    name="normal_login"
                    className="login-form"
                // initialValues={{
                //     remember: true,
                // }}
                onFinish={onFinish}
                >
                    <Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入账号',
                            },
                        ]}
                    >
                        <Input
                            prefix={<UserOutlined className="site-form-item-icon" />}
                            placeholder="账号"
                            className='login-form-input'
                        />
                    </Item>
                    <Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"
                            className='login-form-input'
                        />
                    </Item>
                    <Item>
                        <Button type="primary" htmlType="submit" className="login-form-button" >
                            登录
                        </Button>
                    </Item>
                </Form>
            </div>

        </div>
    )
}

export default Login;
